<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模板</title>
  </head>
  <body>
    <div id="app">
      <input v-focus type="text" />
      <p v-upper>dasdDFSDF</p>
    </div>

    <div id="app2">
      <input v-focus type="text" />
      <p v-upper>dasdDFSDF</p>
    </div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    /*
        自定义指令：
            * 注册(声明)
                * 全局注册：只要是vue实例都可以使用
                    Vue.directive('指令名',{inserted(){}}) //指令名不用加 V- 调用的时候再加
                * 局部注册:只能是注册该指令的实例使用
                    directives:{
                        '指令名' : {
                            inserted() {} //钩子函数
                        },
                        '指令2' : {
                            inserted() {}
                        }
                    }
            * 调用
                <p v-upper="msg"></p>
      */

    //需求1：表单自动聚焦 v-focus
    //全局注册指令
    Vue.directive("focus", {
      inserted(el, binding) {
        // console.log(el, 111);
        // console.log(binding, 222);
        el.focus(); //原生js的自动聚焦函数-没有兼容问题
      },
    });

    new Vue({
      el: "#app",
      data: {
        msg: "dasdDFSDF",
      },

      directives: {
        //需求2：把字符串中的小写字母变成大学(局部注册指令) v-upper
        upper: {
          inserted(el, binding) {
            // console.log(el, 111);
            // console.log(binding, 222);
            let str = el.innerHTML;
            el.innerHTML = str.toUpperCase();
            el.style.color = "red";
          },
        },
      },
    });

    new Vue({
      el: "#app2",
    });
  </script>
</html>
